<template>
    <div>
    <div class="img">
        <img src="https://imagecdn.lapetit.cn/postsystem/docroot/images/goods/201212/10800/h5display_10800_78598.jpg" alt="">
        <p>雪域牛乳芝士</p>
        <p>￥218</p>
        <a class="z1">
            <div class="text">
                <h3>aha会员尊享多重礼遇</h3>
                <h4>开通仅¥99 预计可省¥358</h4>
            </div>
            <div class="text2">
                <span>|</span>
                <span>￥99开通</span>
                <span>></span>
            </div>
        </a>
        <a class="z2">
            <div class="text1">
                <h3>已选规格: 2-4人食</h3>
                <h4>牛乳芝士蛋糕</h4>
            </div>
            <div class="text2">
                <span>></span>
            </div>
        </a>
        <div class="detail">
            <img src="https://imagecdn.lapetit.cn/postsystem/docroot/images/promotion/202108/雪域商详750修改_01.jpg" alt="">
            <img src="https://imagecdn.lapetit.cn/postsystem/docroot/images/promotion/202108/%E9%9B%AA%E5%9F%9F%E5%95%86%E8%AF%A6750%E4%BF%AE%E6%94%B9_02.jpg" alt="">
        </div>
    </div>
    <detail-tabbar/>
    </div>
</template>

<script>
import DetailTabbar from '@/components/DetailTabbar.vue'
    export default {
  components: { DetailTabbar },

    }
</script>
<style lang="scss" scoped>
.img{
    img{
        width: 100vw;
        height: 60vh;
    }
    p{
        // display: inline-block;
        text-align: center;
        font-size: 18px;
        padding-top: 2vh;
        &:nth-child(3){
            color: #cea461;
            padding-bottom: 2vh;
        }
    }
    .z1{
        width: 90vw;
        height: 8vh;
        background-color: #fdfdfd;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        .text{
            display: flex;
            flex-flow: column;
            border-left: 5px solid red;
            h3{
                color: #cea461;
                font-size: 15px;
                padding: 1vh;
            }
            h4{
                font-size: 13px;
                padding-left: 1vh;
            }
        }
        .text2{
            span{
                padding: 0 2vw;
                font-size: 15px;
                color: #cea461;
                line-height: 8vh;
            }
        }
    }
    .z2{
    display: block;
    width: 90vw;
    height: 8vh;
    background-color: rgb(253, 251, 251);
    margin: 2vh auto;
    display: flex;
    justify-content: space-between;
    .text1{
            h3{
                font-size: 15px;
                padding: 1vh;
            }
            h4{
                font-size: 13px;
                padding-left: 1vh;
            }
        }
        .text2{
            font-size: 23px;
            color: #3e3e3e;;
        }
    }
    .detail{
        display: flex;
        flex-flow: column;
        img{
            width: 100vw;
            height: 150vh;
        }
    }
}

</style>